<template>
  <common-header page-title="故事详情" />
  <div class="back-button-container">
    <back-button />
  </div>
  <div class="detail-container">
    <div class="story-card">
      <h2 class="story-title">{{ story.title }}</h2>

      <div class="story-content-wrapper">
        <p class="story-content"><strong>内容:</strong> {{ story.content }}</p>
      </div>

      <!-- 图片 -->
      <div v-if="story.image" class="story-image-container">
        <img :src="story.image" alt="故事图片" class="story-image" />
      </div>

      <!-- 视频 -->
      <div v-if="story.video" class="story-video-container">
        <video :src="story.video" controls class="story-video">
          您的浏览器不支持视频播放。
        </video>
      </div>

      <!-- 时间与浏览数放在底部，左右对齐 -->
      <div class="bottom-info">
        <span class="info-item">
          <i class="el-icon-clock"></i>
          <span class="info-label">发布时间:</span>
          <span class="info-value">{{ formatDate(story.createTime) }}</span>
        </span>
        <span class="info-item">
          <i class="el-icon-view"></i>
          <span class="info-label">浏览次数:</span>
          <span class="info-value">{{ story.viewCount }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'
import CommonHeader from '@/views/user/support/components/CommonHeader.vue'
import BackButton from '@/views/user/support/components/BackButton.vue'

const route = useRoute()
const storyId = route.params.id
const story = ref({})

const fetchStory = async () => {
  try {
    const res = await request.get(BASE_URL+`/api/v1/government/private/sel/${storyId}`)
    story.value = res.data[0] // 注意这里取数组第一个元素
  } catch (err) {
    console.error('获取故事失败:', err)
  }
}

const updateViewCount = async (id) => {
  try {
    await request.get(
        BASE_URL + '/api/v1/government/public/increment-video-view-count',
        { params: { videoId: id } }
    )
    // 刷新故事数据以获取最新的 viewCount
    const res = await request.get(BASE_URL + `/api/v1/government/private/sel/${id}`)
    story.value = res.data[0]
  } catch (err) {
    console.error('更新浏览次数失败:', err)
  }
}

const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 使用async/await保证时序
onMounted(async () => {
  // await updateViewCount(storyId) // 确保先完成计数
  await fetchStory()            // 再获取最新数据
})
</script>

<style scoped>
.detail-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}

.story-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  margin-bottom: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.story-title {
  color: #333;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 25px;
  text-align: center;
  line-height: 1.4;
  position: relative;
  padding-bottom: 15px;
}

.story-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #4a90e2, #7c4dff);
  border-radius: 3px;
}

.story-content-wrapper {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  border-left: 4px solid #4a90e2;
}

.story-content {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.story-image-container,
.story-video-container {
  margin: 30px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.story-image,
.story-video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 500px;
  object-fit: cover;
}

.story-video {
  background: #000;
}

.bottom-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  margin-top: 30px;
  border-top: 1px solid #eee;
  color: #777;
  font-size: 14px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item i {
  margin-right: 8px;
  color: #4a90e2;
  font-size: 16px;
}

.info-label {
  font-weight: 500;
  margin-right: 5px;
}

.info-value {
  color: #555;
}

.back-button-container {
  text-align: center;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .detail-container {
    padding: 15px;
  }

  .story-card {
    padding: 20px;
  }

  .story-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .story-content-wrapper {
    padding: 15px;
  }
}
</style>